
<script>
import mySetting from '@/mixins/mySetting'
import DetailDialog from './components/Dialog'
import copyDialog from './components/copyDialog'
import layoutApi from '@/api/production/layoutDesign'

export default {
  name: 'EqpLayout',
  components: {
    DetailDialog, copyDialog
  },
  mixins: [mySetting],
  data() {
    return {
      searchForm: {},
      tableLoading: true
    }
  },
  created() {
    this.initList()
  },
  methods: {
    // 初始化列表
    async initList() {
      const res = await layoutApi.getList(this.$clearNull({ ...this.listQuery, ...this.searchForm }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    doSeach() {
      this.listQuery.page = 1
      this.initList()
    },
    // 新增数据
    handleCreate() {
      this.$refs.detailDialog.openDialog()
    },
    // 修改数据
    handleEdit() {
      this.$refs.detailDialog.openDialog(this.multipleSelection[0])
    },
    handleDetail(row) {
      this.$refs.detailDialog.openDialog(row, true)
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        `${this.$t('confirmDelete')}${this.multipleSelection.length}${this.$t(
          'recordCount'
        )}?`,
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => {
          return ele.id
        })
        layoutApi.deleteList({ ids: ids }).then((res) => {
          this.$betterTips(res, this.setOnePage, this.initList)
        })
      })
    },
    // 复制布局
    copyItem() {
      this.$refs.copyDialog.openDialog()
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    getList(page) {
      this.listQuery = page
      this.initList()
    }
  },
  render(h) {
    const tableColumns = [
      { prop: '', label: '', type: 'selection' },
      { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
        return (
          <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
        )
      } },
      { prop: 'layoutName', label: this.$t('layoutName'), templete: (_scope) => {
        return (
          <el-link
            underline={false}
            type='primary'
            on-click={ () => this.$router.push({ name: 'EquipmentManage', params: { LayoutId: _scope.row.id }})}
          >{ _scope.row.layoutName }</el-link>
        )
      } },
      { prop: 'areaName', label: this.$t('areaName') },
      { prop: 'description', label: this.$t('description') },
      { prop: '', label: this.$t('details'), templete: (_scope) => {
        return (
          <el-link
            underline={false}
            type='primary'
            on-click={() => this.handleDetail(_scope.row)}
          >{ this.$t('details') }</el-link>
        )
      } }
    ]
    const searchTags = [
      { label: this.$t('layoutName'), prop: 'name', tag: 'DynInput' }
    ]
    return (
      <div class='LayoutDesign'>
        <el-row style='paddingBottom: 0'>
          <el-col span={24}>
            <dynForm info-form={this.searchForm} search-tags={searchTags}>
              <el-button
                type='primary'
                icon='el-icon-search'
                on-click={this.doSeach}>
                { this.$t('search') }</el-button>
            </dynForm>
          </el-col>
        </el-row>
        <div class='table-buttons'>
          <el-button
            v-btnPermission:add
            type='primary'
            icon='el-icon-plus'
            on-click={this.handleCreate}
          >{ this.$t('add') }</el-button>
          <el-button
            v-btnPermission:add
            type='primary'
            icon='el-icon-document-copy'
            on-click={this.copyItem}
          >{ this.$t('copy') }</el-button>
          <el-button
            v-btnPermission:edit
            disabled={this.UpdateDisabled}
            type='primary'
            icon='el-icon-edit'
            on-click={this.handleEdit}
          >{ this.$t('modify') }</el-button>
          <el-button
            v-btnPermission:delete
            disabled={this.DeleteDisabled}
            type='danger'
            icon='el-icon-delete'
            on-click={this.handleDel}
          >{ this.$t('delete') }</el-button>
        </div>
        <el-card class='box-card' shadow='never'>
          <el-row>
            <dynTable
              ref='dynTable'
              loading={this.tableLoading}
              table-data={this.tableData}
              table-columns={tableColumns}
              handle-selection-change={this.handleSelectionChange}
              row-click={this.rowClick}
            />
          </el-row>
          <pagination
            total={this.total}
            page={this.listQuery.page} {...{ on: 'update:page' }}
            size={this.listQuery.size} {...{ on: 'update:size' }}
            vOn:pagination={this.getList}
          />
        </el-card>
        <detailDialog ref='detailDialog' vOn:initList={this.initList}/>
        <copyDialog ref='copyDialog' vOn:initList={this.initList}/>
      </div>
    )
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form {
  padding-top: 10px;
  //     .el-form-item{
  //   margin-bottom: 15px;
  // }
}
</style>
